<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增离乌申请数据')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <h2>请准确输入信息便于工作人员快速协助您解决问题</h2>
    <form class="form-horizontal m" id="form-lwsq-add">
        <fieldset>
            <legend>个人信息</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label">证件类型：</label>
                <div class="col-sm-8">
                    <select name="zjlx" id="zjlx" class="form-control m-b" th:with="type=${@dict.getType('b_zjlx')}"
                            required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">证件号码：</label>
                <div class="col-sm-8">
                    <input name="zjhm" id="zjhm" class="form-control" placeholder="请输入您的证件号码(用于身份核验,请正确填写)" type="text"
                           required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">申请人姓名：</label>
                <div class="col-sm-8">
                    <input name="xm" class="form-control" placeholder="请输入您的姓名" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">性别：</label>
                <div class="col-sm-8">
                    <select name="xb" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">族别：</label>
                <div class="col-sm-8">
                    <select name="mz" class="form-control m-b" th:with="type=${@dict.getType('b_ry_mz')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input name="by3" class="form-control" placeholder="请输入您的年龄" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">人员类型：</label>
                <div class="col-sm-8">
                    <select name="sfjn" class="form-control m-b" th:with="type=${@dict.getType('b_rylx')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">联系方式：</label>
                <div class="col-sm-8">
                    <input name="sjhm" class="form-control" placeholder="请输入您的联系方式" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所属社区：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="sqName" autocomplete="off" onclick="selectDeptTree()" id="sqName" type="text" placeholder="请选择归属社区"
                               class="form-control" required>
                        <input name="sqCode" id="sqCode" type="text" style="display: none;">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
                <script type="text/javascript">
                    /* 选择部门树 */
                    function selectDeptTree() {
                        /*var treeId = $("#treeId").val();
                        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();*/
                        var deptId = "100";
                        var url = ctx + "system/dept/selectDeptTree/" + deptId;
                        var options = {
                            title: '选择部门',
                            width: "380",
                            url: url,
                            callBack: doSubmit
                        };
                        $.modal.openOptions(options);
                    };

                    function doSubmit(index, layero) {
                        var tree = layero.find("iframe")[0].contentWindow.$._tree;
                        if ($.tree.notAllowParents(tree)) {
                            var body = layer.getChildFrame('body', index);
                            $("#sqCode").val(body.find('#treeId').val());
                            $("#sqName").val(body.find('#treeName').val());
                            layer.close(index);
                        }
                    }
                </script>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">暂住所类型：</label>
                <div class="col-sm-8">
                    <select name="zzslx" class="form-control m-b" th:with="type=${@dict.getType('b_zzslx')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">房间号：</label>
                <div class="col-sm-8">
                    <!--<select name="by1" id="by1" class="form-control" required>
                        <option value="">未选择</option>
                    </select>-->
                    <input autocomplete="off" onclick="selectRoom()" class="form-control" required name="by1" id="by1" />
                    <!--房间号id-->
                    <input type="text" style="display: none;" name="by10" id="by10">
                </div>
                <script type="text/javascript">
                    /* 选择房间号 */
                    function selectRoom() {
                        var sqName=$("input[name=sqName]").val();
                        var sqCode=$("input[name=sqCode]").val();
                        var sscsLx=$("select[name=zzslx]").find("option:selected").val();
                        var url = ctx + "place/room/selectroom?sqCode="+sqCode+"&sscsLx="+sscsLx+"&sqName="+sqName;
                        var options = {
                            title: '选择房间号',
                            width: "700",
                            url: url,
                            callBack: doRoomSubmit
                        };
                        $.modal.openOptions(options);
                    };

                    function doRoomSubmit(index, layero) {
                        /*var tree = layero.find("iframe")[0].contentWindow.$._tree;
                        if ($.tree.notAllowParents(tree)) {

                        }*/
                        var body = layer.getChildFrame('body', index);
                        $("#by1").val(body.find('#fjNum').find("option:selected").text());
                        $("#by10").val(body.find('#fjNum').find("option:selected").val());
                        layer.close(index);
                    }
                </script>
            </div>
        </fieldset>
        <fieldset>
            <legend>行程信息</legend>
            <div class="form-group">
                <label for="rwrq" class="col-sm-3 control-label is-required">入乌日期：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="rwrq" id="rwrq" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">入驻时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="by4" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>其他信息</legend>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">详细地址/隔离点：</label>
                <div class="col-sm-8">
                    <textarea name="xxdz" class="form-control" placeholder="如宾馆/酒店名称/住所所在道路、门牌号、小区、楼栋号、单元室等"
                              required></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">近3天是否有发热咳嗽等症状：</label>
                <div class="col-sm-8">
                    <select name="styc" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预期离乌日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="yqlwrq" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">返程目的地：</label>
                <div class="col-sm-8">
                    <input name="fcmdd" class="form-control" placeholder="请输入您的返程目的地" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">离乌事由：</label>
                <div class="col-sm-8">
                    <input name="by2" class="form-control" placeholder="请输入您的离乌事由" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">离乌方式：</label>
                <div class="col-sm-8">
                    <select name="lwfs" class="form-control m-b" th:with="type=${@dict.getType('b_jtfs')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group" style="display:none">
                <label class="col-sm-3 control-label">航班/车次/车牌号：</label>
                <div class="col-sm-8">
                    <input name="cphm" placeholder="航班/车次/车牌号" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">是否做过个人核酸检测：</label>
                <div class="col-sm-8">
                    <select name="hsjc" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">核酸检测日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="hsjcRq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">是否做过双抗检测：</label>
                <div class="col-sm-8">
                    <select name="skjc" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">双抗检测日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="skjcRq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <!--<div class="form-group" style="display:none">-->
            <!--<label class="col-sm-3 control-label">经度：</label>-->
            <!--<div class="col-sm-8">-->
            <!--<input name="by5" placeholder="经度" class="form-control" type="text">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group" style="display:none">-->
            <!--<label class="col-sm-3 control-label">纬度：</label>-->
            <!--<div class="col-sm-8">-->
            <!--<input name="by6" placeholder="纬度" class="form-control" type="text">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group" style="display:none">-->
            <!--<label class="col-sm-3 control-label">推送人员id：</label>-->
            <!--<div class="col-sm-8">-->
            <!--<input name="by7" placeholder="推送人员id" class="form-control" type="text">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label"style="display:none">离开住所时间：</label>-->
            <!--<div class="col-sm-8">-->
            <!--<div class="input-group date">-->
            <!--<input name="by8" class="form-control" placeholder="yyyy-MM-dd" type="text">-->
            <!--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label"style="display:none">到达站台时间：</label>-->
            <!--<div class="col-sm-8">-->
            <!--<div class="input-group date">-->
            <!--<input name="by9" class="form-control" placeholder="yyyy-MM-dd" type="text">-->
            <!--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
        </fieldset>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "lwsq/lwsq"
    var aValidator = $("#form-lwsq-add").validate({
        focusCleanup: true,
        rules: {
            zjhm: {
                required: true,
                isIdentity: true
            },
            sjhm: {
                isPhone: true
            }
        }

    });

    $(function () {
        //证件类型
        $("#zjlx").change(function () {
            $.validate.reset();
            var type = $("#zjlx").find("option:selected").val();
            if ("sfz" == type) {
                $("#zjhm").rules("remove");
                $("#zjhm").rules("add", {required: true, isIdentity: true, messages: {required: "请正确输入您的身份证号码"}});
            } else {
                $("input[name=zjhm]").rules("remove");
                $("#zjhm").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
            }
        });
        //核算检测
        $("select[name=hsjc]").change(function () {
            $.validate.reset();
            var hs = $(this).find("option:selected").val().toLowerCase().trim();
            if ("y" == hs) {
                $("input[name=hsjcRq]").rules("remove");
                $("input[name=hsjcRq]").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("input[name=hsjcRq]").closest("div.form-group").show()
            } else {
                $("input[name=hsjcRq]").rules("remove");
                $("input[name=hsjcRq]").closest("div.form-group").hide()
            }
        })
        //双抗检测
        $("select[name=skjc]").change(function () {
            $.validate.reset();
            var hs = $(this).find("option:selected").val().toLowerCase().trim();
            if ("y" == hs) {
                $("input[name=skjcRq]").rules("remove");
                $("input[name=skjcRq]").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("input[name=skjcRq]").closest("div.form-group").show();
            } else {
                $("input[name=skjcRq]").rules("remove");
                $("input[name=skjcRq]").closest("div.form-group").hide();
            }
        })
        //离乌方式
        $("select[name=lwfs]").change(function () {
            $.validate.reset();
            var hs = $(this).find("option:selected").val().trim();
            if ("zj" == hs) {
                $("input[name=cphm]").rules("remove");
                $("input[name=cphm]").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("input[name=cphm]").closest("div.form-group").show();
            } else {
                $("input[name=cphm]").rules("remove");
                $("input[name=cphm]").closest("div.form-group").hide();
            }
        });


        /*$("select[name=zzslx]").change(function () {
            $.validate.reset();
            var hs = $(this).find("option:selected").val();
            if ("jd" == hs) {
                $("input[name=by1]").rules("remove");
                //房间号显示出来
                $("input[name=by1]").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("input[name=by1]").closest("div.form-group").show();
            } else {
                $("input[name=by1]").rules("remove");
                $("input[name=by1]").closest("div.form-group").hide();
                $("input[name=by1]").val("");
            }
        });*/
    })

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-lwsq-add').serialize());
        }
    }

    /**
     * 点击后面的日历图标也能选择日期
     */
    $(".fa-calendar").closest('.input-group-addon').click(function () {
        $(this).prev().datetimepicker('show');
    })

    $("input[name='shclsj']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='rwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("input[name='rwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            alert("请选择早于今天的入乌时间！");
            $(this).val("");
            $(this).focus();
        }
    });

    $("input[name='yqlwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("input[name='yqlwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d < curDate) {
            alert("请选择晚于今天的预期离乌时间！");
            $(this).val("");
            $(this).focus();
        }
    });

    $("input[name='hsjcRq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("input[name='hsjcRq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            alert("请选择早于今天的核酸检测时间！");
            $(this).val("");
            $(this).focus();
        }
    });
    $("input[name='skjcRq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("input[name='skjcRq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            alert("请选择早于今天的双抗检测时间！");
            $(this).val("");
            $(this).focus();
        }
    });
    $("input[name='by4']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("input[name='by4']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            alert("请选择早于今天的入驻时间！");
            $(this).val("");
            $(this).focus();
        }
    });
    // $("input[name='by8']").datetimepicker({
    //     format: "yyyy-mm-dd",
    //     minView: "month",
    //     autoclose: true
    // });
    // $("input[name='by9']").datetimepicker({
    //     format: "yyyy-mm-dd",
    //     minView: "month",
    //     autoclose: true
    // });
    //输入框获取鼠标焦bai点          

    // function autoFocus(){
    //     var pFocus = document.getElementById("zjhm");
    //         pFocus.focus();
    //         pFocus.select();
    //     var pfFocus = document.getElementById("xm");
    //         pfFocus.focus();
    //         pfFocus.select();
    //
    // }


</script>
</body>
</html>